<template>
  <div class="search_1">
    <div class="STAMainHeader">
      <el-input  class="SearchBox" placeholder="输入关键字搜索" v-model="searchInput" @keyup.enter.native="handleSearch">
        <el-button type="primary" slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </el-input>
    </div>
    <div><div style="border-bottom: 3px solid skyblue;width:900px"></div></div>
    <div><el-row>
            <!-- <el-col :span="24" v-for="(o, index) in 10" :key="o" :offset="index > -1 ? 0 : 0"> -->
            <el-col :span="24" v-for="(item, k) in dataList" :key="k" >
                <el-card :body-style="{ padding: '0px' }" class="block" shadow="hover" @click.native="Achdetail(item)" style="cursor: pointer">
                <el-container>
                  <el-aside class="EAside">
                    <img :src="item.achpicurl" class="image">
                  </el-aside>
                    <el-main class="EMain">
                      <el-container>
                        <el-header style="margin-right:15%;height:80px">
                          <el-row >
                            <el-col :span="24"><h3>{{item.achname}}</h3></el-col>
                          </el-row>
                        </el-header>
                        <el-main style="text-align: left; font-size: 14px; height:80px;color:#606266">
                          <el-col :span="12" ><span class="tt-2">阶段：</span>{{item.achtype}}</el-col>
                          <el-col :span="12" ><span class="tt-2">日期：</span>{{item.achdate}}</el-col>
                        </el-main>
                        <el-footer style="text-align: left; font-size: 14px;color:#606266">
                            <el-col :span="12" style="color:#303133"><span class="tt-2">领域：</span>{{item.achfield}}</el-col>
                            <el-col :span="12" ><span class="tt-2">行业：</span>{{item.achindu}}</el-col>
                        </el-footer>
                      </el-container>
                    </el-main>
                </el-container>
                </el-card>
            </el-col>
            </el-row>
            <div class="blockpage">
              <sand-tachievements-grouppage ref="STApage" @getcurrentPage="getpage" @getpageSize="getpagesize"></sand-tachievements-grouppage>
            </div>
            </div>
            
  </div>
</template>

<script>
import AchDetail from "./AchDetail.vue"
import SandTachievementsGrouppage from '../SandTAchievementsGroup/SandTachievementsGrouppage.vue'

export default {
  name: 'STAMain',
  
  data () {
    return {
      // ftotal:0,
      searchInput : "",
      search:"",
      currentPage:1,
      pageSize:10,
      // fid:"001",
      // inid:"101",
      // bid:"201",

      achname:"",
      achtype:"",
      achdate:"",
      achprice:"",
      achfield:"",
      achindu:"",
      dataList:"",
      achpicurl:"",

    }
  },
  created(){
    this.getinfo(this.fid,this.inid,this.bid,this.search,this.pageSize,this.currentPage);
    this.$bus.$on('fielddate',fid=>{
      this.fid=fid;
      console.log(this.fid);
    })
    this.$bus.$on('indudate',inid=>{
      this.inid=inid;
      console.log("#",this.inid);
    })
    this.$bus.$on('belongsdate',bid=>{
      this.bid=bid;
      console.log("##",this.bid);
    })
  },
  methods: {
    getpage(p){
      console.log("当前页：",p)
      this.currentPage=p;
    },
    getpagesize(p){
      console.log("页大小：",p)
      this.pageSize=p;
    },
    Achdetail(item){
      this.$router.push({path:'/AchDetail',
      query: {
        achname:item.achname,
        achtype:item.achtype,
        achdate:item.achdate,
        achprice:item.achprice,
        achfield:item.achfiled,
        achindu:item.achindu,
        achremark:item.achremark,
        achrelarequire:item.achrelarequire,
        achown:item.achown,
        achcontact:item.achcontact,
        achmail:item.achmail,
        achpubno:item.achpubno,
        lawstatus:item.lawstatus,
        achphase:item.achphase,
        transinten:item.transinten,
        achpicurl:item.achpicurl,
      }
      });
    },
    getinfo(fid,inid,bid,searchInput,pageSize,currentPage){
      let params={
        // achfield:fid,
        // achindu:inid,
        // achcenter:bid,
        // searchInput:searchInput,
        pageSize:pageSize,
        currentPage:currentPage
      }
      console.log("###",params);
      this.api.getach(params).then(res => {
        let {code, message, data} = res;
        if(['200', 200].includes(code) && res.success == true) {
          this.$refs.STApage.sendtotal(res.total);
          console.log("总数：",this.ftotal,data);
          this.dataList = data;
        }
        else {
            this.$message({
                type: "info",
                message: message
            })
        }
      }).catch(err => {
          this.$message({
              type: "info",
              message: err
          })
      })
    },
    handleSearch(){
      this.search=this.searchInput;
    },
    
  },
  components:{
    AchDetail,
    SandTachievementsGrouppage,
  },
  watch:{
    bid:{
      handler(newVal,oldVal){
        this.getinfo(this.fid,this.inid,newVal,this.search,this.pageSize,this.currentPage)
      }
    },
    fid:{
      handler(newVal,oldVal){
        this.getinfo(newVal,this.inid,this.bid,this.search,this.pageSize,this.currentPage)
      }
    },
    inid:{
      handler(newVal,oldVal){
        this.getinfo(this.fid,newVal,this.bid,this.search,this.pageSize,this.currentPage)
      }
    },
    search:{
      handler(newVal,oldVal){
        this.getinfo(this.fid,this.inid,this.bid,newVal,this.pageSize,this.currentPage)
      }
    },
    currentPage:{
      handler(newVal,oldVal){
        this.getinfo(this.fid,this.inid,this.bid,this.search,this.pageSize,newVal)
      }
    }
  }
}
</script>

<style scoped>
  .tt-2{
    color: rgb(219, 35, 35);
    font-size: 16px;
  }
  .STAMainHeader{
    
    height: 60px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  .SearchBox{
    width: 500px;
    float: right;
    padding: 10px 30px 10px 0px;
  }
  .block{
      margin-left: 5%;
      margin-top: 3%;
      width: 850px;
      height: 200px;
      border-color:#cae3fc;
  }
  .image {
    height: 200px;
    width: 250px;
    /* padding: 5px; */
    display: block;
    box-shadow: 0 25px 12px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .EMain{
    width:60%;
    display: block;
  }

  
</style>

